<template>
  <div>
    <section class="primary py-8 pl-5 mine__head d-flex">
      <van-image :src="avatar" class="rounded-circle mr-4"></van-image>
      <span class="text--inverse font-xl pt-2">{{ account.accountName || account.mobile }}</span>
    </section>
    <section v-for="item in mineConfig" :key="item.title" class="mine__config-item mt-5 ml-5">
      <div class="mine__config-item-title font-xl pl-2 font-weight-bold mb-7">{{ item.title }}</div>
      <div
        v-for="val in item.children"
        :key="val.key"
        class="d-inline-block text-center mr-16 pl-1 primary--text"
        @click="goTo(val.to)"
      >
        <i :class="['font-size-xxxl', val.icon]"></i>
        <p class="text--primary mt-4">{{ val.label }}</p>
      </div>
    </section>
  </div>
</template>
<script>
// import { mapState } from 'vuex';
import { getUserPayload } from '@/api/utils/submit-token';
import { mineConfig } from './utils/config';

export default {
  name: 'UserCenter',
  layout: 'tabbar',
  head() {
    return {
      title: '个人中心',
    };
  },
  asyncData() {},
  data() {
    return {
      mineConfig,
    };
  },
  computed: {
    // ...mapState('user', ['account']),
    account() {
      // FIXME: 统一处理用户信息
      return getUserPayload();
    },
    avatar() {
      return require('@/assets/images/avatar-default.png');
    },
  },
};
</script>
<style scoped lang="less">
.mine {
  &__head {
    .van-image {
      width: 55px;
      overflow: hidden;
      flex-shrink: 0;
    }
  }
  &__config-item {
    &-title {
      border-left: 4px solid @primary-color;
    }
    &_image {
      width: 25px;
    }
  }
}
</style>
